<style lang="less">
@white: #FFFFFF;
.ExchangeTradeDetailList{
  color: #333333;
  font-size: .28rem;
  .dy-body{
    padding-top: .91rem;
  }
  .trade-query{
    height:.88rem;
    text-align: center;
    line-height: .88rem;
    background-color: @white;
    border-top: 1px solid #EBEBEB;
  }
  .item-box{
    width: 100%;
    margin-top: .2rem;
    background-color: @white;
    display: flex;
    .exchange-type-img{
      text-align: center;
      flex: 1;
      >div{
        width: .42rem;
        height: .36rem;
        margin: 0 auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        >img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .exchange-item-main{
      flex: 6.5;
      >div{
        height: .79rem;
        line-height: .79rem;
        display: flex;
        >span{
          display: inline-block;
          flex: 1;
        }
        >span:nth-of-type(2){
          text-align: right;
          color: #999999;
          padding-right: .4rem;
        }
      }
    }
  }
}
</style>
<template>
  <div class="dy-main ExchangeTradeDetailList">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back" @on-click-more="showMenus = true">交易明细
      </x-header>
    </div>
    <div class="dy-body">
      <div class="trade-query" @click="gotoNext('ExchangeTradeDetailFilter')">条件查询</div>
      <div class="dy-wapper">
        <scroller lock-x style="height:11.17rem;">
          <div class="scroller-box">
            <div v-for="(item, index) in lists" :key="index" @click="gotoNext('ExchangeTradeDetail', index)">
              <div class="item-box">
                <div class="exchange-type-img">
                  <div><img :src="item.iconUrl"/></div>
                </div>
                <div class="exchange-item-main">
                  <div>
                    <span>{{ item.exchangeType }}</span>
                    <span>{{ item.middleRate }}</span>
                  </div>
                  <div>
                    <span>成交汇率</span>
                    <span>{{ item.billBuy }}</span>
                  </div>
                  <div>
                    <span>购汇账号</span>
                    <span>{{ item.billSell }}</span>
                  </div>
                  <div>
                    <span>入账账号</span>
                    <span>{{ item.remitSell }}</span>
                  </div>
                  <div>
                    <span>交易日期</span>
                    <span>{{ item.remitType }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
import Buy from '../../assets/img/Exchange/iconBuy.png'
import Settle from '../../assets/img/Exchange/iconSettle.png'
export default {
  data () {
    return {
      lists: [
        {curryType: 'EUR', iconUrl: Buy, exchangeType: '购汇', middleRate: '115.00', billBuy: '123', billSell: '678', remitSell: '987', remitBuy: '679', billType: '1', remitType: '2018-05-16'},
        {curryType: 'USD', iconUrl: Settle, exchangeType: '结汇', middleRate: '116.00', billBuy: '124', billSell: '679', remitSell: '986', remitBuy: '671', billType: '0', remitType: '2018-05-17'},
        {curryType: 'JPY', iconUrl: Buy, exchangeType: '结汇', middleRate: '113.00', billBuy: '125', billSell: '671', remitSell: '985', remitBuy: '672', billType: '1', remitType: '2018-05-18'},
        {curryType: 'HKD', iconUrl: Settle, exchangeType: '购汇', middleRate: '117.00', billBuy: '126', billSell: '672', remitSell: '984', remitBuy: '673', billType: '1', remitType: '2018-05-20'},
        {curryType: 'AUD', iconUrl: Buy, exchangeType: '结汇', middleRate: '119.00', billBuy: '127', billSell: '673', remitSell: '983', remitBuy: '674', billType: '0', remitType: '2018-05-21'},
        {curryType: 'GBP', iconUrl: Settle, exchangeType: '购汇', middleRate: '146.00', billBuy: '128', billSell: '674', remitSell: '982', remitBuy: '675', billType: '1', remitType: '2018-05-22'}
      ]
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    gotoNext (Name) {
      this.$router.push({path: Name})
    },
    refreshOption () {
      let LVm = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'showProDetail', 'basic_Data': {'productId': '3015'}}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            LVm.financialData = response.data.data[0]
            LVm.status = response.status
          } else {
            console.log('fail')
          }
        }
      )
    }
  },
  created () {
    this.refreshOption()
  }
}
</script>
